<template>
  <div class="add-role">
    <!-- 角色名称 -->
    <div>
      <span class="name">角色名称</span>
      <a-input placeholder="请输入角色名称（10字以内）" style="width:250px" />
    </div>
    <!-- 简要信息 -->
    <div style="margin-top:15px;display:flex;algin-item:center">
      <span class="name">简要信息</span>
      <a-textarea placeholder="请输入角色简要信息（50字以内）" style="width:400px" autosize />
    </div>
    <!-- 平台权限 -->
    <a-tabs defaultActiveKey="1" @change="callback">
      <a-tab-pane tab="平台权限" key="1">
        <a-tree
          checkable
          @expand="onExpand"
          :expandedKeys="expandedKeys"
          :autoExpandParent="autoExpandParent"
          v-model="checkedKeys"
          @select="onSelect"
          :selectedKeys="selectedKeys"
          :treeData="treeData"
        />
      </a-tab-pane>
      <a-tab-pane tab="应用权限" key="2" forceRender>Content of Tab Pane 2</a-tab-pane>
    </a-tabs>
  </div>
</template>
<script>
const treeData = [{
  title: '0-0',
  key: '0-0',
  children: [{
    title: '0-0-0',
    key: '0-0-0',
    children: [
      { title: '0-0-0-0', key: '0-0-0-0' },
      { title: '0-0-0-1', key: '0-0-0-1' },
      { title: '0-0-0-2', key: '0-0-0-2' },
    ],
  }, {
    title: '0-0-1',
    key: '0-0-1',
    children: [
      { title: '0-0-1-0', key: '0-0-1-0' },
      { title: '0-0-1-1', key: '0-0-1-1' },
      { title: '0-0-1-2', key: '0-0-1-2' },
    ],
  }, {
    title: '0-0-2',
    key: '0-0-2',
  }],
}, {
  title: '0-1',
  key: '0-1',
  children: [
    { title: '0-1-0-0', key: '0-1-0-0' },
    { title: '0-1-0-1', key: '0-1-0-1' },
    { title: '0-1-0-2', key: '0-1-0-2' },
  ],
}, {
  title: '0-2',
  key: '0-2',
}]
export default {
  watch: {
    checkedKeys(val) {
      window.window.console.log('onCheck', val)
    }
  },
  data () {
    return {
      expandedKeys: ['0-0-0', '0-0-1'],
      autoExpandParent: true,
      checkedKeys: ['0-0-0'],
      selectedKeys: [],
      treeData,
    }
  },
  methods: {
    callback (key) {
      window.window.console.log(key)
    },
    onExpand (expandedKeys) {
      window.window.console.log('onExpand', expandedKeys)
      // if not set autoExpandParent to false, if children expanded, parent can not collapse.
      // or, you can remove all expanded children keys.
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },
    onCheck (checkedKeys) {
      window.window.console.log('onCheck', checkedKeys)
      this.checkedKeys = checkedKeys
    },
    onSelect (selectedKeys, info) {
      window.window.console.log('onSelect', info)
      this.selectedKeys = selectedKeys
    },
  },
}
</script>
<style lang="less" scoped>
.add-role {
  color: #333333;
}
.name {
  display: inline-block;
  width: 80px;
}
</style>